<template>
    <div class="detail_module_panel personal_info">
        <el-row>
            <!--个人信息start-->
            <el-col :span="8">
                <h2 style="line-height: 40px"><i class="el-icon-menu"><b> {{ $t('common.personalInfo') }}</b></i></h2>
                <el-row class="row">
                    <el-col class="label" :span="8">User ID</el-col>
                    <el-col class="info" :span="16">{{ userInfo.userId }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.name') }}</el-col><!--姓名-->
                    <el-col class="info" :span="16">{{ userCardInfo.realName }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.gender') }}</el-col><!--性别-->
                    <el-col class="info" :span="16">{{ userCardInfo.sex === '0' ? $t('common.female') : $t('common.male') }}</el-col>
                </el-row>

                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.dateOfBirth')}}</el-col><!--出生日期-->
                    <el-col class="info" :span="20">{{ userCardInfo.sex | formatDate('yyyy-MM-dd') }}
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.education')}}</el-col><!--学历-->
                    <el-col class="info" :span="20">{{ userJobInfo.education }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.isMarried')}}</el-col><!--婚姻状况-->
                    <el-col class="info" :span="20">{{ userJobInfo.isMarried }}</el-col>
                </el-row>

                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.numberOfChildren')}}</el-col><!--子女个数-->
                    <el-col class="info" :span="20">{{ userJobInfo.isMarried }}</el-col>
                </el-row>

                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.monthlyIncome')}}</el-col><!--月收入-->
                    <el-col class="info" :span="20">{{ userJobInfo.isMarried }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.email')}}</el-col><!--邮箱-->
                    <el-col class="info" :span="20">{{ userJobInfo.isMarried }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.backupPhone')}}</el-col><!--备用号码-->
                    <el-col class="info" :span="20">{{ userJobInfo.isMarried }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.idCardType')}}</el-col><!--证件类型-->
                    <el-col class="info" :span="20">{{ userJobInfo.cardId }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.idCardNumber')}}</el-col><!--证件号码-->
                    <el-col class="info" :span="20">{{ userJobInfo.cardId }}</el-col>
                </el-row>

                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.identityNumber') }}</el-col><!--身份证号-->
                    <el-col class="info" :span="16">{{ userCardInfo.cardId }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.mobileNumber') }}</el-col><!--手机号-->
                    <el-col class="info" :span="16">{{ userInfo.phone }}
                        <el-button
                                v-if="userInfo.phone"
                                @click="call(userInfo.phone, keyMap.relationshipMap.self)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call
                        </el-button>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.resAddress') }}</el-col><!--居住地址-->
                    <el-col class="info" :span="16">{{ liveAddress }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.loanCardNumber') }}</el-col><!--借款卡号-->
                    <el-col class="info" :span="16">{{ userAccountInfo.account }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.loanCardPhone') }}</el-col><!--借款卡预留号码-->
                    <el-col class="info" :span="16">
                        <span>{{ userAccountInfo.accountPhone }}</span>
                        <el-button
                                v-if="userAccountInfo.accountPhone"
                                @click="call(userAccountInfo.accountPhone, keyMap.relationshipMap.borrowCard)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call
                        </el-button>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.repayCardNumber') }}</el-col><!--还款卡号-->
                    <el-col class="info" :span="16">{{ repayCardInfo.bankAccount }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.repayCardPhone') }}</el-col><!--还款卡预留号码-->
                    <el-col class="info" :span="16" v-if="repayCardInfo.bankAccount">
                        {{ userAccountInfo.accountPhone }}
                        <el-button
                                v-if="userAccountInfo.accountPhone"
                                @click="call(userAccountInfo.accountPhone, keyMap.relationshipMap.repayCard)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call
                        </el-button>
                    </el-col>
                </el-row>
            </el-col><!--个人信息end-->

            <!--重要联系人信息start-->
            <el-col :span="8">
                <h2 style="line-height: 40px"><i class="el-icon-menu"><b> {{$t('common.importantContacts')}}</b></i></h2> <!--重要联系人信息-->
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.name') }}</el-col> <!--姓名-->
                    <el-col class="info" :span="16">{{ userContactsInfo.contactFirst }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.relationship') }}</el-col> <!--{{ $t('common.relationship') }}-->
                    <el-col class="info" :span="16">{{ userContactsInfo.relationshipFirst | relationship }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.mobileNumber') }}</el-col> <!--手机号-->
                    <el-col class="info" :span="16">
                        {{ userContactsInfo.phoneFirst }}
                        <el-button
                                v-if="userContactsInfo.phoneFirst"
                                @click="call(userContactsInfo.phoneFirst, userContactsInfo.relationshipFirst)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call</el-button>
                    </el-col>
                </el-row>
                <h2 style="line-height: 40px; padding-top: 20px;"><i class="el-icon-menu"><b> 紧急联系人信息</b></i></h2>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.name') }}</el-col>
                    <el-col class="info" :span="16">{{ userContactsInfo.contactSecond }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.relationship') }}</el-col>
                    <el-col class="info" :span="16">{{ userContactsInfo.relationshipSecond | relationship }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{ $t('common.mobileNumber') }}</el-col>
                    <el-col class="info" :span="16">
                        {{ userContactsInfo.phoneSecond }}
                        <el-button
                                v-if="userContactsInfo.phoneSecond"
                                @click="call(userContactsInfo.phoneSecond, userContactsInfo.relationshipSecond)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call</el-button>
                    </el-col>
                </el-row>

                <!--</el-col>&lt;!&ndash;重要联系人end&ndash;&gt;-->
                <!--&lt;!&ndash;工作信息start&ndash;&gt;-->
                <!--<el-col :span="8">-->
                <h2 style="line-height: 40px"><i class="el-icon-menu"><b> {{ $t('common.workInformation') }}</b></i></h2>
                <!--<el-row class="row">-->
                <!--<el-col class="label" :span="8"><div class="panel_info_content_title"><i class="dot"></i>{{$t('common.workInformation')}}</div></el-col>-->
                <!--</el-row>-->
                <el-row class="row">
                    <el-col class="label" :span="8">{{$t('common.careerType')}}</el-col>
                    <el-col class="info" :span="16">{{ userData.jobType?$t('common.workTypeList.' + userData.jobType):'--' }}</el-col>
                </el-row>
                <!--<el-row class="row">-->
                <!--<el-col class="label" :span="8">{{$t('common.salary')}}</el-col>-->
                <!--<el-col class="info" :span="16">{{ userData.salary?$t('common.salaryList.' + userData.salary):'&#45;&#45;'}}</el-col>-->
                <!--</el-row>-->
                <!--<el-row class="row">-->
                <!--<el-col class="label" :span="8">{{$t('common.taxNum')}}</el-col>-->
                <!--<el-col class="info" :span="16">{{ userData.dutyParagraph }}</el-col>-->
                <!--</el-row>-->
                <el-row class="row">
                    <el-col class="label" :span="8">{{$t('common.corpName')}}</el-col>
                    <el-col class="info" :span="16">{{ userData.companyName }}
                        <el-button v-if="userData.companyName" @click="searchWords(userData.companyName)" type="text" icon="search" size="mini">{{ $t('common.positiveCheck') }}</el-button>
                    </el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{$t('common.corpAddress')}}</el-col>
                    <el-col class="info" :span="16">{{ companyAddress }}</el-col>
                </el-row>
                <!--<el-row class="row">-->
                <!--<el-col class="label" :span="8">{{$t('common.corpIndustry')}}</el-col>-->
                <!--<el-col class="info" :span="16">{{ userData.companyIndustry }}</el-col>-->
                <!--</el-row>-->
                <el-row class="row">
                    <el-col class="label" :span="8">{{$t('common.currPosition')}}</el-col>
                    <el-col class="info" :span="16">{{ userData.currentPosition }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{$t('common.corpPhone')}}</el-col>
                    <el-col class="info" :span="16">
                        {{ userData.companyTel }}
                        <!--<hide-phone-num :phone="userData.companyTel"></hide-phone-num>&lt;!&ndash;脱敏显示电话号码&ndash;&gt;-->
                        <el-button v-if="userData.companyTel" @click="searchWords(userData.companyTel)" type="text" icon="search" size="mini">{{$t('common.negativeCheck')}}</el-button>
                        <el-button v-if="userData.companyTel" @click="$call(userData.companyTel)" class="btn_call_center" type="text" icon="el-icon-phone">Call</el-button>
                    </el-col>
                </el-row>
                <!--email-->
                <!--<el-row class="row">-->
                <!--<el-col class="label" :span="8">{{$t('common.email')}}</el-col>-->
                <!--<el-col class="info" :span="16">{{ userData.email }}</el-col>-->
                <!--</el-row>-->
                <!--<el-row class="row">-->
                <!--<el-col class="label" :span="8">{{$t('common.workingDuration')}}</el-col>-->
                <!--<el-col class="info" :span="16">{{ userData.entryLength?$t('common.workTimeList.' + userData.entryLength):'&#45;&#45;' }}</el-col>-->
                <!--</el-row>-->
                <el-row class="row">
                    <el-col class="label" :span="8">{{$t('common.payDay')}}</el-col>
                    <el-col class="info" :span="16">{{ userData.payDay? ( $t('common.everyMonth') + '' + userData.payDay + ''  + $t('common.everyDay')):'--' }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">{{$t('common.payInterval')}}</el-col>
                    <el-col class="info" :span="16">{{ userData.payDay? ( $t('common.everyMonth') + '' + userData.payDay + ''  + $t('common.everyDay')):'--' }}</el-col>
                </el-row>
            </el-col><!--工作信息end-->

            <!--材料信息start-->
            <el-col :span="8">
                <h2 style="line-height: 40px"><i class="el-icon-menu"><b> {{ $t('common.materialInfo') }}</b></i></h2>
                <!--<h3 id="work_student" class="detail_panel_title detail_panel_title_icon other_info_icon">{{$t('common.materialInfo')}}</h3>-->
                <!--<div class="panel_info_content">-->
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.bankName')}}</el-col>
                    <el-col class="info" :span="20">{{ userOrderBankInfo.bankName }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.entryBankNum')}}</el-col>
                    <el-col class="info" :span="20">{{ userOrderBankInfo.account }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.getPaymentName')}}</el-col>
                    <el-col class="info" :span="20">{{ userOrderBankInfo.accountName }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="4">{{$t('common.idInfoCollect')}}</el-col>
                    <el-col class="info" :span="20">
                        <ul class="imgs">
                            <li>
                                <!--身份证正面-->
                                <a @click="showImg(userData.cardPositiveImg)" :style="backgroundImg(userData.cardPositiveImg)" href="javascript:void(0);"></a>
                                <span class="img_desc">{{$t('common.idCardFrontSide')}}</span>
                            </li>
                            <li>
                                <!--手持身份证照片-->
                                <a @click="showImg(userData.cardImg)" :style="backgroundImg(userData.cardImg)" href="javascript:void(0);"></a>
                                <span class="img_desc">{{$t('common.handCardPic')}}</span>
                            </li>
                        </ul>
                    </el-col>
                </el-row>
                <!--</div>-->
            </el-col>
            <!--材料信息end-->

            <!--补充联系人信息start-->
            <!-- <el-col :span="8">
                <h2 style="line-height: 40px"><i class="el-icon-menu"><b> 补充联系人信息</b></i></h2>
                <el-row class="row">
                    <el-col class="label" :span="8">1姓名</el-col>
                    <el-col class="info" :span="16">{{ userContactsInfo.contactThird }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">1关系</el-col>
                    <el-col class="info" :span="16">{{ userContactsInfo.relationshipThird | relationship }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">1手机号</el-col>
                    <el-col class="info" :span="16">
                        {{ userContactsInfo.phoneThird }}
                        <el-button
                                v-if="userContactsInfo.phoneThird"
                                @click="call(userContactsInfo.phoneThird, userContactsInfo.relationshipThird)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call</el-button>
                    </el-col>
                </el-row>

                <el-row class="row" style="padding-top: 40px;">
                    <el-col class="label" :span="8">2姓名</el-col>
                    <el-col class="info" :span="16">{{ userContactsInfo.contactFourth }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">2关系</el-col>
                    <el-col class="info" :span="16">{{ userContactsInfo.relationshipFourth | relationship }}</el-col>
                </el-row>
                <el-row class="row">
                    <el-col class="label" :span="8">2手机号</el-col>
                    <el-col class="info" :span="16">
                        {{ userContactsInfo.phoneFourth }}
                        <el-button
                                v-if="userContactsInfo.phoneFourth"
                                @click="call(userContactsInfo.phoneFourth, userContactsInfo.relationshipFourth)"
                                class="btn_call_center"
                                size="mini"
                                type="text"
                                icon="el-icon-phone">Call</el-button>
                    </el-col>
                </el-row>
            </el-col> -->
            <!--补充联系人信息end-->
        </el-row>
    </div>
</template>

<script>
    import EventBus from '@/libs/event-bus';
    import {eventConf, keyMap} from '@/config/';

    let that = null;
    export default {
        name: 'personal-info',
        // props: {
        //     userData: {
        //         type: Object
        //     }
        // },
        data() {
            return {
                userData: {
                },
                userOrderBankInfo:{},
                overdueInfoId: '',
                userBaseInfo: {
                    province: '',
                    city: '',
                    district: '',
                    address: '',
                },
                userContactsInfo: {
                    contactFirst: '',
                    phoneFirst: '',
                    relationshipFirst: '',
                    contactSecond: '',
                    phoneSecond: '',
                    relationshipSecond: '',
                    contactThird: '',
                    phoneThird: '',
                    relationshipThird: '',
                    contactFourth: '',
                    phoneFourth: '',
                    relationshipFourth: '',
                },
                userInfo: {
                    userId: '',
                    phone: '',
                },
                userJobInfo: {
                    address: '',
                    city: '',
                    companyName: '',
                    companyTel: '',
                    district: '',
                    province: '',
                },
                userCardInfo: {
                    realName: '',
                    cardId: '',
                    sex: '',
                },
                userAccountInfo: {
                    account: '',
                    accountPhone: '',
                },
                personalInfo: {
                    phone: '',
                },
                myParamsTel: '',
                myParamsName: '',
                callRecordId: '',
                keyMap,
                day: '',
                month: '',
                year: '',
                repayCardInfo: {
                    bankAccount: '', // 还款卡号
                    phone: '', // 还款卡预留手机号
                },
            };
        },
        computed: {
            // 居住地址
            liveAddress() {
                return `${this.userBaseInfo.province}${this.userBaseInfo.city}${this.userBaseInfo.district}${this.userBaseInfo.address}`;
            },
            // 公司地址
            companyAddress() {
                return `${this.userJobInfo.province}${this.userJobInfo.city}${this.userJobInfo.district}${this.userJobInfo.address}`;
            }
        },
        methods: {
            getUserInfo() {
                const params = {
                    ycsOverdueInfoId: this.overdueInfoId,
                };
                this.$api.collection.getUserInfoPre(params).then((res) => {
                    const {status, data} = res;
                    if (status === '1' && data) {
                        Object.keys(data).forEach(key => {
                            // this[key] = Object.assign(this[key], data[key]);
                            Object.assign(this[key], data[key]);
                        });
                    }
                });
            },
            getRepayRecord() {
            },
            call(tel, relationship) {
                // var d = new Date();
                // var day = d.getDate();
                // var month = d.getMonth() + 1;
                // if (month > 0 && month <= 9) {
                //     month = '0' + month;
                // }
                // if (day >= 0 && day <= 9){
                //     day = '0' + day;
                // }
                // var year = d.getFullYear();
                // var hour = d.getHours();
                // if (hour >= 0 && hour <= 9){
                //     hour = '0' + hour;
                // }
                // var minute = d.getMinutes();
                // if (minute >= 0 && minute <= 9){
                //     minute = '0' + minute;
                // }
                // var second = d.getSeconds();
                // if (second >= 0 && second <= 9){
                //     second = '0' + second;
                // }
                // var time = year + "-" + month + "-" + day + ' ' + hour + ':' + minute + ':' + second;
                if (tel) {
                    const params = {
                        phone: tel.replace(/-/g, ""),
                        overdueInfoId: this.overdueInfoId
                    };
                    this.$api.collection.callOutPre(params).then(res => {
                        const {status, data, error} = res;
                        if ('1' === status && '00000000' === error) {
                            if (keyMap.relationshipMap[relationship]) {
                                relationship = keyMap.relationshipMap[relationship];
                            }
                            EventBus.$emit(eventConf.CALL_EVENT, {
                                // time,
                                tel,
                                relationship,
                                callRecordId: data
                            });
                        }
                    });
                }
            },
            listenEvent() {
                EventBus.$on('bankAccount', (bankAccount) => {
                    // this.repayCardInfo.phone = this.userAccountInfo.accountPhone;
                    this.repayCardInfo.bankAccount = bankAccount;
                });
            },
            backgroundImg(url) {
                // 构造图片展示
                const style = {};
                if (url) {
                    style.backgroundImage = 'url("' + url + '")';
                }
                return style;
            },
            showImg(url, video) {
                if (video && url) {
                    this.videoUrl = url;
                    // this.videoUrl = 'http://www.w3school.com.cn/i/movie.ogg';
                    this.imgUrl = '';
                    this.showImgDialog = true;
                } else if (!video && url) {
                    this.showImgDialog = true;
                    this.imgUrl = url;
                    this.videoUrl = '';
                }
            },
        },
        filters: {
            // 联系人关系
            relationship(val) {
                switch (val) {
                    case 'parent':
                        return '父母';
                    case 'mate':
                        return '配偶';
                    case 'brother':
                        return '兄弟';
                    case 'sister':
                        return '姐妹';
                    case 'relatives':
                        return '亲属';
                    case 'friends':
                        return '朋友';
                    case 'schoolmate':
                        return '同学';
                    case 'workmate':
                        return '同事';
                    case 'other':
                        return '其他';
                    default :
                        return '';
                }
            }
        },
        created() {
            that = this;
            const params = this.$route.params;
            this.overdueInfoId = parseInt(params.id);
            this.getUserInfo();
            this.getRepayRecord();
            this.listenEvent();
        },
    };
</script>

<style lang="scss" scoped>
</style>
